<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <p:fieldset id="filtrosSeleccionados" style="background-color: #ddd; text-align: center;">  

        <p:outputPanel id="dropArea" styleClass="dropArea">  

            <h:outputText value="¡Arrastra los Filtros!"  
                          rendered="#{empty ordenCompraFiltros.filtrosSeleccionados}"
                          styleClass="relieve"/>  


            <p:dataGrid var="f" value="#{ordenCompraFiltros.filtrosSeleccionados}"  
                        id="filtroS"
                        rendered="#{not empty ordenCompraFiltros.filtrosSeleccionados}"
                        columns="6">  

                <p:column>  

                    <h:panelGrid columns="3" id="filtro2">
                        <p:graphicImage value="/imagenes/filtro.gif"/>
                        <h:outputText value="#{f.nombre}"/>
                        <h:panelGrid columns="2">
                            <h:commandButton image="/imagenes/edit.png" onclick="#{f.openDialog}"/>
                            <h:commandLink>
                                <p:graphicImage value="/imagenes/delete.png" alt=""/>
                                <p:ajax listener="#{ordenCompraFiltros.quitarFiltro(f)}" 
                                        update="@(.resultado, .dropArea, .filtrosDisponibles)"/>
                            </h:commandLink>


                        </h:panelGrid>

                    </h:panelGrid>

                </p:column>  

            </p:dataGrid>
        </p:outputPanel> 



    </p:fieldset>


    <p:droppable tolerance="touch" for="filtrosSeleccionados"
                 activeStyleClass="ui-state-highlight"
                 datasource="filtrosDisponibles" onDrop="handleDrop">  
        <p:ajax listener="#{ordenCompraFiltros.onCarDrop}" update="dropArea @(.resultado)"/>  
    </p:droppable>  
</ui:composition>
